<template>
  <div class="my">
    <!-- 头部 -->
    <div class="header">
      <!-- 用户信息 -->
      <div class="userinfo-box">
        <div class="user-info">
          <!-- 头像 -->
          <div class="user-pic-f">
            <img class="user-pic" src="../../assets/icons/my/my-user-pic.jpg" alt />
          </div>
          <!-- 网名 -->
          <div class="user-name-f">
            <span class="user-name">Rachel</span>
          </div>
          <!-- 三个太阳小图标 -->
          <div class="user-icon-f">
            <img class="icon" src="../../assets/icons/my/my-sun.svg" alt />
            <img class="icon" src="../../assets/icons/my/my-sun.svg" alt />
            <img class="icon" src="../../assets/icons/my/my-sun.svg" alt />
          </div>
        </div>
      </div>
      <!-- 二维码 -->
      <div class="Qrcode">
        <img src="../../assets/icons/my/Qrcode.png" alt />
      </div>
      <!-- 个性签名 -->
      <div class="signature">
        <span>keep trying and never give up!</span>
      </div>
    </div>
    <!-- 导航 -->
    <div class="nav-box">
      <ul class="nav">
        <li class="nav-item nav-item-members">
          <img src="../../assets/icons/my/members.svg" alt />
          <span>我的会员</span>
        </li>
        <li class="nav-item nav-item-collection">
          <img src="../../assets/icons/my/collection.svg" alt />
          <span>我的收藏</span>
        </li>
        <li class="nav-item nav-item-security">
          <img src="../../assets/icons/my/security.svg" alt />
          <span>安全设置</span>
        </li>
        <li class="nav-item nav-item-DataEdit">
          <img src="../../assets/icons/my/DataEdit.svg" alt />
          <span>资料修改</span>
        </li>
        <li class="nav-item nav-item-Focus">
          <img src="../../assets/icons/my/security.svg" alt />
          <span>我的关注</span>
        </li>
        <li class="nav-item nav-item-management">
          <img src="../../assets/icons/my/management.svg" alt />
          <span>账号管理</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  created () {},
  methods: {}
}
</script>

<style lang="less" scoped>
.my {
  padding-bottom: 50px;
  .header {
    position: relative;
    height: 143px;
    background: url(../../assets/icons/my/my-header-bkg.jpg) no-repeat center;
    background-size: 404px 143px;
    .userinfo-box {
      padding-left: 10px;
      .user-info {
        display: flex;
        .user-pic-f {
          position: relative;
          width: 34px;
          height: 34px;
          margin-top: 12px;
          border-radius: 50%;
          border: 2px solid #fff;
          overflow: hidden;
          margin-right: 12px;
          .user-pic {
            position: absolute;
            left: -10px;
            width: 54px;
            height: 34px;
          }
        }

        .user-name-f {
          width: 73px;
          height: 38px;
          margin-top: 10px;
          margin-right: 4px;
          font-size: 22px;
          .user-name {
            line-height: 38px;
            text-align: left;
            color: rgba(247, 247, 247, 1);
          }
        }
        .user-icon-f {
          display: flex;
          margin-top: 22px;
          .icon {
            width: 17px;
            height: 17px;
          }
        }
      }
    }
    .Qrcode {
      position: absolute;
      left: 320px;
      top: 53px;
      width: 22px;
      height: 22px;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    .signature {
      position: absolute;
      width: 238px;
      height: 25px;
      left: 17px;
      top: 68px;
      color: rgba(247, 247, 247, 1);
      font-size: 13px;
      line-height: 25px;
      text-align: left;
    }
  }
  .nav-box {
    padding-left: 10px;
    .nav {
      .nav-item {
        display: flex;

        > img {
          width: 27px;
          height: 27px;
          margin-right: 15px;
        }
        > span {
          height: 22px;
          width: 158px;
          color: rgba(80, 80, 80, 1);
          font-size: 15px;
          line-height: 150%;
          text-align: left;
        }
      }
      .nav-item-members {
        margin-top: 20px;
      }
      .nav-item-collection {
        margin-top: 22px;
      }
      .nav-item-security,
      .nav-item-DataEdit {
        margin-top: 25px;
      }
      .nav-item-Focus{
        margin-top: 30px;
      }
      .nav-item-management{
        margin-top: 28px;
      }
    }
  }
}
</style>
